<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增会员</title>
    <!--  引入本地的layui.css样式文件  -->

    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

<form class="layui-form" action="" style="margin: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">会员编号</label>
        <div class="layui-input-inline">
            <input type="text" name="id" id="id" lay-verify="required|account" autocomplete="off" placeholder="请填写编号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" id="password" lay-verify="required|password" size="20px" autocomplete="off" placeholder="请填写登录密码" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="account" lay-verify="required|account" autocomplete="off" placeholder="请填写姓名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员类型</label>
        <div class="layui-input-inline">
            <label>
                <select name="dept">
                    <option value="">请选择</option>
                    <option value="普通会员" >普通会员</option>
                    <option value="白银会员">白银会员</option>
                    <option value="黄金会员">黄金会员</option>
                    <option value="究极大会员">究极大会员</option>
                </select>
            </label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出生日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="age" id="entry_date" placeholder="出生日期">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系方式</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" autocomplete="off" placeholder="请填写手机号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">住址</label>
        <div class="layui-input-inline">
            <input type="text" name="address" class="layui-input" size="20px" placeholder="请填写住址">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">初始时间</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="age" id="start_date" placeholder="初始时间">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">到期时间</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="age" id="end_date" placeholder="到期时间">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="btn_submit">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary">取消</button>
        </div>
    </div>
</form>



<!--  引入本地的layui.js文件  -->
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layedit', 'layer','laydate'], function(){
        var $ = layui.$,
            form = layui.form,
            layedit = layui.layedit,
            laydate = layui.laydate,
            layer = layui.layer;

        //常规用法
        laydate.render({
            elem: '#entry_date'
        });

        var $ = layui.$,
            form = layui.form,
            layedit = layui.layedit,
            laydate = layui.laydate,
            layer = layui.layer;

        //常规用法
        laydate.render({
            elem: '#start_date'
        });

        var $ = layui.$,
            form = layui.form,
            layedit = layui.layedit,
            laydate = layui.laydate,
            layer = layui.layer;

        //常规用法
        laydate.render({
            elem: '#end_date'
        });
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            password: function(value){
                if(value.length < 3){
                    return '密码至少得5个字符啊';
                }
            }
            ,passwords: [
                /^[a-zA-Z]\w{5,17}$/
                ,'以字母开头，长度在6~18之间，只能包含字母、数字和下划线'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
        var eIndex = layedit.build('LAY_demo_editor');
        //自定义验证规则
        form.verify({
            id: function(value){
                //只能是数字
                var reg = /^[0-9]*$/;
                if(!reg.test(value)){
                    return '会员编号只允许输入数字';
                }
            }
            ,content: function(value){
                layedit.sync(eIndex);
            }
        });
        //监听提交
        form.on('submit(btn_submit)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })

            return false;
        });


    });
</script>

</body>
</html>